<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>xm</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.js"></script>
	</head>
	<style>
		
	
	body{
		margin: 0 auto;
		background-color: #f5f5f5;
	}
	.all{
		display: flex;
		height: 800px;
		width: 1600px;
	}
	.Left{
		width: 300px;
		margin-top: 15px;
		margin-left: 50px;
		float: left;
		transition:all 0.3s;
	}
	a{
		text-decoration: none;
	}
	ul li{
		float: left;
		height: 375px;
		width: 290px;
		list-style: none;
		text-align: center;
		background-color: #fff;
		margin: 0 10px 10px 0;
		transition:all 0.3s;
	}
	.Left :hover{
		transform: scale(1.02,1.02);
	}
	ul>li:hover{
		transform: scale(1.02,1.02);
	}
	h3{
		color: #333;
		font-size: 14px;
	}
	.des{
		color: #b0b0b0;
		font-size: 12px;
		margin-top: -30px;
	}
	.price{
		font-size: 14px;
		color: #ff6700;
		margin-top: -20px;
		margin-bottom: 15px;
	}
	</style>
	<body>
		<div class="content">
			<!--左边图片-->
			<div class="Left">
				<img src=" http://yfgssb.gitee.io/oldman-website/img/ph1.png" alt="">
			</div>
			<!--右边手机列表-->
			<div id="root">
				<ul>
					<!--遍历每个元素，图片、标题、文字以及价格-->
					<li v-for="v in list":key="v.id" v-bind:title="v.title" v-bind:des="v.des" v-bind:price="v.price">
							<a href=""><img class="img":src="v.img"/>
							<br><h3>{{v.title}}</h3>
							<br><p class="des">{{v.des}}</p>
							<br><p class="price">{{v.price}}</p></a>
					</li>
				</ul>
			</div>
		</div>
		
		<script>
		//创建Vue项目
			const phoneList=Vue.createApp({
				data(){
					return{
						list:[//编辑手机列表信息
							{
								id:'0',
								img:'http://yfgssb.gitee.io/oldman-website/img/phone1.png',
								title:'Redmi 12C',
								des:'高性能长续航，5000万像素超清双摄',
								price:'699元起',
							},
							{
								id:'1',
								img:'http://yfgssb.gitee.io/oldman-website/img/phone2.png',
								title:'Redmi K60',
								des:'骁龙8+ | 2k 高光直屏 | 5500mAh+67... ',
								price:'2499元起',
							},
							{
								id:'2',
								img:'http://yfgssb.gitee.io/oldman-website/img/phone3.png',
								title:'Redmi K60Pro',
								des:'【第二代骁龙8】狂暴引擎',
								price:'3299元起',
							},
							{
								id:'3',
								img:'http://yfgssb.gitee.io/oldman-website/img/phone4.png',
								title:'Redmi Note 12 Pro极速版',
								des:' 高通骁龙778G，OLED柔性直屏+一亿...',
								price:'1699元起',
							},
							{
								id:'4',
								img:'http://yfgssb.gitee.io/oldman-website/img/phone5.png',
								title:'Xiaomi 13 限量定制色  ',
								des:'全新第二代骁龙8 | 徕卡专业光学镜头...',
								price:'4999元',
							},
							{
								id:'5',
								img:'http://yfgssb.gitee.io/oldman-website/img/phone6.png',
								title:'Xiaomi 13 Pro',
								des:'新第二代骁龙8 | 徕卡专业光学镜头...',
								price:'4999元起',
							},
							{
								id:'6',
								img:'http://yfgssb.gitee.io/oldman-website/img/phone7.png',
								title:'Xiaomi 13',
								des:'新第二代骁龙8 | 徕卡专业光学镜头...  ',
								price:'3999元起',
							},
							{
								id:'7',
								img:'http://yfgssb.gitee.io/oldman-website/img/phone8.png',
								title:'Redmi Note 12 5G',
								des:'三星OLED护眼屏 | 骁龙5G芯 | 50...',
								price:'1199元起',
							}	
						]
					}
				},
			});
			phoneList.mount('#root');
		</script>
	</body>
</html>
